"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/6
 */
import * as React from 'react'
import {MyBadgeProps} from "../interface/index";
import MyText from "./MyText";
import {badgeStyles} from "../assets/styles/badge";
import {autoSize, commonStyles} from "../assets/styles/common";

const {View, TouchableOpacity} = require('react-native');
const {connect} = require('react-redux');


class MyBadge extends React.Component<MyBadgeProps, any> {

    static defaultProps = {
        overflowCount: 99,
        number: 0
    };
    renderBadge = () => {

        let number = '';
        if (this.props.number <= 0) {
            return null;
        } else if (this.props.number >= this.props.overflowCount) {
            number = `+${this.props.overflowCount}`
        } else {
            number = `${this.props.number}`
        }

        let width = autoSize(17),
            right = autoSize(-6);
        if (number.length == 1) {

        } else if (number.length == 2) {
            width = autoSize(20);
            right = autoSize(-10);
        }else{
            width = autoSize(28);
            right = autoSize(-10);
        }
        return (
            <View style={badgeStyles.container}>
                <View style={[badgeStyles.badge, commonStyles.centerVH, {width, right}]}>
                    <MyText style={badgeStyles.badgeText} numberOfLines={1}>{number}</MyText>
                </View>
            </View>
        )
    };


    render() {
        return (
            <View style={{position: 'relative'}}>
                {this.props.children}
                {this.renderBadge()}
            </View>
        );
    }
}


export default MyBadge;